<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0!important;">

		<el-tabs v-model="tabIndex" @tab-click="getList">
			<el-tab-pane :label="tab.name" :key="tabI" v-for="(tab, tabI) in tabbars"></el-tab-pane>
		</el-tabs>


		<button-search ref="buttonSearch" placeholder="要搜索的商品名称" @search="searchEvent">
			<!-- 左边 -->
			<template #left>
				<router-link :to="{ name: 'shop_goods_create' }" class="mr-2">
					<el-button type="success" size="mini">发布商品</el-button>
				</router-link>
				<el-button type="warning" size="mini" v-if="tab === 'delete'"
					@click="doEvent('restore')">恢复商品</el-button>
				<el-button type="danger" size="mini" v-if="tab === 'delete'"
					@click="doEvent('destroy')">彻底删除</el-button>
				<el-button type="danger" size="mini" v-if="tab != 'delete'" @click="deleteAll">批量删除</el-button>
				<el-button size="mini" v-if="tab === 'all' || tab === 'off'" @click="changeStatus(1)">上架</el-button>
				<el-button size="mini" v-if="tab === 'all' || tab === 'saling'" @click="changeStatus(0)">下架</el-button>
			</template>
			<!-- 高级搜索表单 -->
			<template #form>
				<el-form inline ref="form" :model="form" label-width="80px">
					<el-form-item label="商品名称" class="mb-0">
						<el-input v-model="form.title" placeholder="商品名称" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="商品分类" class="mb-0">
						<el-select v-model="form.categoryId" placeholder="请选择商品分类" size="mini">
							<el-option v-for="item in cateOptions" :key="item.id" :label="item | tree" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="mb-0">
						<el-button type="info" size="mini" @click="searchEvent">
							搜索</el-button>
						<el-button size="mini" @click="clearSearch">清空筛选条件</el-button>
					</el-form-item>
				</el-form>
			</template>
		</button-search>

		<!-- 商品列表 -->
		<el-table border class="mt-3" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="45" align="center">
			</el-table-column>

			<el-table-column label="商品" width="300">
				<template slot-scope="scope">
					<div class="media">
						<img class="mr-3" style="width: 60px;height: 60px;" :src="scope.row.cover">
						<div class="media-body">
							<p class="mt-0">{{ scope.row.title }}</p>
							<p class="mb-0">分类：{{ scope.row.category.name }}</p>
							<p class="mb-0">时间：{{ scope.row.createTime | dateFormat }}</p>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="saleCount" width="80" label="实际销量">
				<!-- {{ scope.row.saleCount }} -->
			</el-table-column>
			<el-table-column prop="status" align="center" label="商品状态" width="80">
				<template slot-scope="scope">
					<span class="badge" :class="scope.row.status ? 'badge-success' : 'badge-danger'">{{ scope.row.status
						? '上架' : '仓库' }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" align="center" width="100" label="审核状态">
				<template slot-scope="scope">
					<div class="d-flex flex-column" v-if="!scope.row.ischeck">
						<el-button type="success" size="mini" @click="checkGoods(scope.row, 1)" plain>审核通过
						</el-button>

						<el-button class="ml-0 mt-2" type="danger" size="mini" @click="checkGoods(scope.row, 2)"
							plain>审核拒绝
						</el-button>
					</div>
					<span v-else>{{ scope.row.ischeck === 1 ? '通过' : '拒绝' }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="stock" align="center" width="70" label="总库存">
			</el-table-column>
			<el-table-column prop="pprice" align="center" label=" 价格(元)" width="200">
				<template slot-scope="scope">
					<span class="text-danger">最低售价：￥{{ scope.row.minPrice }}</span>
					<!-- <span>/</span> -->
					 <br/>
					<span class="text-muted">原价：￥{{ scope.row.minOprice }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="mini"
						@click="navigate('shop_goods_create', scope.row.id)">基础设置</el-button>
					<el-button type="text" size="mini" @click="navigate('shop_goods_sku', scope.row.id)"
						:class="(scope.row.skuType == 0 && !scope.row.skValue) || (scope.row.skuType == 1 && !scope.row.goodsSkus.length) ? 'text-danger' : ''">商品规格</el-button>
					<el-button type="text" size="mini" @click="navigate('shop_goods_attr', scope.row.id)"
						:class="scope.row.goodsAttrs.length == 0 ? 'text-danger' : ''">商品属性</el-button>
					<el-button type="text" size="mini" @click="navigate('shop_goods_banner', scope.row.id)"
						:class="scope.row.goodsBanner.length == 0 ? 'text-danger' : ''">媒体设置</el-button>
					<el-button type="text" size="mini" @click="navigate('shop_goods_content', scope.row.id)"
						:class="!scope.row.content ? 'text-danger' : ''">商品详情</el-button>
					<el-button type="text" size="mini">折扣设置</el-button>

					<el-button type="text" size="mini" @click="deleteItem(scope.row)"
						v-show="scope.row.del != 1">删除商品</el-button>

				</template>
			</el-table-column>
		</el-table>
		<div style="height: 60px;"></div>
		<el-footer class="border-top d-flex align-items-center px-0 position-fixed bg-white"
			style="bottom: 0;left: 200px;right: 0;z-index: 100;">
			<div style="flex: 1;" class="px-2">
				<el-pagination :current-page="page.current" :page-sizes="page.sizes" :page-size="page.size"
					layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
					@current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</el-footer>

	</div>
</template>

<script>
import buttonSearch from "@/components/common/button-search.vue"
import common from '@/common/mixins/common.js';
export default {
	mixins: [common],
	inject: ['layout'],
	components: {
		buttonSearch
	},
	data() {
		return {
			preUrl: "goods",

			tabIndex: 0,
			tabbars: [
				{ name: "全部", key: "all" },
				{ name: "审核中", key: "checking" },
				{ name: "未通过", key: "not_passed" },
				{ name: "出售中", key: "saling" },
				{ name: "已下架", key: "off" },
				{ name: "库存预警", key: "min_stock" },
				{ name: "回收站", key: "delete" },
			],
			form: {
				title: "",
				categoryId: ""
			},
			tableData: [],
			cateOptions: []
		}
	},
	filters: {
		tree(item) {
			if (item.level == 0) {
				return item.name
			}
			let str = ''
			for (let i = 0; i < item.level; i++) {
				str += i == 0 ? '|--' : '--'
			}
			return str + ' ' + item.name;
		}
	},
	computed: {
		tab() {
			return this.tabbars[this.tabIndex].key
		},
		params() {
			let str = ''
			for (let key in this.form) {
				let val = this.form[key]
				if (val) {
					str += `&${key}=${this.form[key]}`
				}
			}
			return str
		}
	},
	created() {

	},
	methods: {
		navigate(name, id) {
			this.$router.push({
				name,
				params: { id }
			})
		},
		// 获取请求列表分页url
		getListUrl() {
			return `/admin/${this.preUrl}/${this.page.current}?limit=${this.page.size}&tab=${this.tab}${this.params}`
		},
		getListResult(e) {
			console.log(e);
			this.tableData = e.list
			this.cateOptions = e.cates
		},
		// 上下架
		changeStatus(item) {
			item.status = item.status === 1 ? 0 : 1
		},
		// 清空筛选条件
		clearSearch() {
			this.form = {
				title: "",
				categoryId: ""
			}
		},
		// 搜索事件
		searchEvent(e = false) {
			// 简单搜索
			if (typeof e === 'string') {
				this.form.title = e
			}
			// 高级搜索
			this.getList()
		},
		doEvent(key) {
			if (this.ids.length === 0) {
				return this.$message({
					type: "error",
					message: "请选择要操作的商品"
				})
			}
			this.showLoading()
			this.axios.post('/admin/goods/' + key, {
				ids: this.ids
			}, {
				token: true
			}).then(res => {
				this.$message({
					type: "success",
					message: "操作成功"
				})
				this.getList()
				this.hideLoading()
			}).catch(err => {
				this.hideLoading()
			})
		},
		// 上下架
		changeStatus(status) {
			if (this.ids.length === 0) {
				return this.$message({
					type: "error",
					message: "请选择要操作的商品"
				})
			}
			this.showLoading()
			this.axios.post('/admin/goods/changestatus', {
				ids: this.ids,
				status
			}, { token: true }).then(res => {
				this.$message({
					type: "success",
					message: "操作成功"
				})
				this.getList()
				this.hideLoading()
			}).catch(err => {
				this.hideLoading()
			})
		},
		checkGoods(item, ischeck) {
			this.layout.showLoading()
			this.axios.post('/admin/goods/' + item.id + '/check', {
				ischeck
			}, { token: true }).then(res => {
				this.getList()
				this.$message({
					type: "success",
					message: "操作成功"
				})
				this.layout.hideLoading()
			}).catch(err => {
				this.layout.hideLoading()
			})
		}
	},
}
</script>

<style></style>
